WWL.fadebox = function ( name )
{
	var fadebox = new WWL ( 'fadebox', name );

	fadebox._support_transitions = liwe.dom.supports ( "transition" );

	fadebox._event_names = [ "over", "out", "click" ];

	fadebox.width = 400;
	fadebox.height = 300;
	fadebox._items = [];

	// Display time in milliseconds before fading
	// set this value to 0 to stop automatic fading
	fadebox.display_time = 300;

	fadebox.cbacks [ 'render' ] = function ( sbox ) { 
		fadebox._set_content ();

		var cnt = $( fadebox.id );

		if ( fadebox._support_transitions )
		{
			if ( ! cnt._has_events )
			{
				cnt.addEventListener ( "transitionend", fadebox._remove_child, false );
				cnt.addEventListener ( "webkitTransitionEnd", fadebox._remove_child, false );
				cnt._has_events = true;
			}
		}
	};

	fadebox.clear = function ()
	{
		// List of items inside fadebox
		fadebox._items = [];
	};

	fadebox.set_size = function ( w, h )
	{
		fadebox.width = w;
		fadebox.height = h;
	};

	fadebox.add_item = function ( html )
	{
		fadebox._items.push ( html );
	};

	fadebox.to_string = function ()
	{
		var s = new String.buffer ();

		s.add ( '<div class="wwl_' + fadebox.type + '" style="width: ' + fadebox.width + 'px; height: ' + fadebox.height + 'px">' );
		s.add ( fadebox._render_container () );
                s.add ( '</div>' );

		return s.toString ();
	};

	fadebox._render_container = function ()
	{
		var s = new String.buffer ();

		var container_width = ( fadebox.items_to_show + 2 ) * fadebox.item_width;

		s.add ( String.formatDict ( WWL.fadebox.templates [ 'container-start' ], { 
			"container_width" : container_width + fadebox.item_width * 2,
			"left" :  - fadebox.item_width,
			"id" : fadebox.id,
			"height" : fadebox.item_height
				} ) );

		s.add ( WWL.fadebox.templates [ 'container-end' ] );

		return s.toString ();
	};

	fadebox._set_content = function ()
	{
		var t, l = fadebox._items.length;
		var item, el;
		
		for ( t = 0; t < fadebox.items_to_show + 2; t ++ )
		{
			el = fadebox._create_element ( fadebox._start + t );

			$( fadebox.id ).appendChild ( el );
		}
	};


	fadebox._set_transition = function ( cnt )
	{
		cnt.style.MozTransition = "opacity 0.5s ease-in";
		cnt.style.WebkitTransition = "opacity 0.5s ease-in";
		cnt.style.Transition = "opacity 0.5s ease-in";
	};

	fadebox._create_element = function ( pos )
	{
		item = fadebox._items [ pos ];

		if ( ! item ) item = "";
		
		el = document.createElement ( 'div' );
		el.className = "wwl_fadebox_item";
		el.style.width = fadebox.item_width +"px";
		el.style.height = fadebox.item_height + "px";
		el.innerHTML = item;

		return el;
	};

	fadebox.get_item = function ( pos ) { return fadebox._items [ pos ]; };
	fadebox.set_item = function ( pos, html ) { fadebox._items [ pos ] = html; };

	return fadebox;
};

WWL.fadebox.get_instance = function ( instance_name )
{
	return WWL.get_instance ( "fadebox", instance_name );
};
